<!--
 * @Author: trk trk990920@163.com
 * @Date: 2022-02-14 14:05:30
 * @LastEditors: trk trk990920@163.com
 * @LastEditTime: 2022-07-21 16:17:33
 * @Description: layout全局
-->
<template>
  <div :class="classObj" class="AppWrap">
    <SideBar class="sidebar-container" />
    <div class="main_wrap">
      <Header />
      <router-view class="content"></router-view>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Header from '../components/header/index.vue'
import SideBar from '../components/sideBar/index.vue'
import { sideBarStore } from '@/store/modules/sideBar'
import { computed } from 'vue';

const sidebar = computed(() => {
  return sideBarStore()
})

const classObj = computed(() => {
  return {
    hideSidebar: !sidebar.value.opened
  }
})
</script>
<style lang="scss" scoped>
.AppWrap {
  width: 100%;
  height: 100%;
  // display: flex;
  // flex-direction: row;
  // justify-content: space-between;
  @include clearfix;
  position: relative;
}
.sidebar-container {
  transition: width 0.28s;
  width: $sideBarWidth !important;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  background-color: #ffffff !important;
}
.main_wrap {
  height: 100%;
  transition: margin-left .28s;
  margin-left: $sideBarWidth;
  position: relative;
}
.content {
  height: calc(100vh - 84px);
  padding: 32px;
  background-color: #F2F7FF;
  overflow: auto;
}

.hideSidebar {
  .main_wrap {
    margin-left: 54px;
  }

  .sidebar-container {
    width: 54px !important;
  }

  .fixed-header {
    width: calc(100% - 54px)
  }
}
</style>